<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2015/3/13
  Time: 14:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html  ng-app="validationApp">
<head>
    <title></title>
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/css/main/bootstrap.min.css">
    <link href="<%=request.getContextPath() %>/resources/css/main/style.css" rel="stylesheet" type="text/css" media="all" />
    <script src="<%=request.getContextPath() %>/resources/js/public/angular.js"></script>
    <script src="<%=request.getContextPath() %>/resources/js/jquery-1.8.3.js"></script>
</head>
<body >
<div id="container">
    <%@include file="/jsp/public/top.jspf"%>
    <div id="mainbody" ng-controller="mainController">
        <div class="register_account">
            <div class="wrap">
                <h4 class="title">创建一个账户</h4>
                <form method="post" action="<%=request.getContextPath() %>/user/register" name="userForm"  novalidate>
                    <div class="col_1_of_2 span_1_of_2">
                        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine}">
                            <label >用户名：</label>
                            <input type="text" name="username" value="username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" ng-model="username" ng-minlength="2" ng-maxlength="8" class="form-control" required ensure-unique="username" >
                            <p ng-show="userForm.username.$error.minlength" class="help-block">用户名不得少于两位字符</p>
                            <p ng-show="userForm.username.$error.maxlength" class="help-block">用户名不得超过八位字符</p>
                            <p ng-show="userForm.username.$error.unique" class="help-block">用户名已存在</p>
                        </div>
                        <div class="form-group"  ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
                            <label >邮箱：</label>
                            <input type="email" name="email" value="E-Mail"  onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"   ng-model="email" class="form-control" required>
                            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">请输入一个合法的Email地址.</p>
                        </div>

                        <div class="form-group" ng-class="{ 'has-error' : userForm.pw1.$invalid && !userForm.pw1.$pristine }" >
                            <label >密码：</label>
                            <input type="password" id="pw1" name="pw1"   required  class="form-control"    ng-model="pw1"   >

                        </div>
                        <div class="form-group" ng-class="{ 'has-error' : userForm.pw2.$invalid && !userForm.pw2.$pristine }" >
                            <label >确认密码：</label>
                            <input type="password"  id="pw2" name="pw2"    required class="form-control" ng-model="pw2"  pw-check="pw1">
                            <p ng-show="userForm.pw2.$error.match"  class="help-block">密码不匹配.</p>


                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="button">
                        <input type="submit"name="Submit" value="创建" ng-disabled="userForm.$invalid"> <p class="terms">点击创建新账户即意味您同意<a href="#">使用条款</a>.</p>
                    </div>
                    <div class="clear"></div>
                </form>
            </div>
        </div>
    </div>
    <div class="footPush"></div>
</div>
<%@include file="/jsp/public/footer.jspf"%>

</body>
</html>

<script>


    var app = angular.module('validationApp', []);
    function mainController($scope) {

        $scope.submitForm = function(isValid) {

            // check to make sure the form is completely valid
            if (isValid) {
                alert("success");
                $scope.submitted  = true;
            }

        };
    }

    app.directive('pwCheck', [function () {
        return {
            require: 'ngModel',
            link: function (scope, elem, attrs, ctrl) {
                var firstPassword = '#' + attrs.pwCheck;
                elem.add(firstPassword).on('keyup', function () {
                    scope.$apply(function () {
                        ctrl.$setValidity('match', elem.val() === $(firstPassword).val());
                    });
                });
            }
        };
    }]);
    app.directive('ensureUnique', function($http) {
        return {
            require: 'ngModel',
            link: function(scope, ele, attrs, c) {

                scope.$watch(attrs.ngModel, function(n) {
                    if (!n) return;

                    $http({method: 'GET', url: '<%=request.getContextPath() %>/user/check/' + ele.val()}).
                            success(function (data, status, headers, config) {
                                c.$setValidity('unique', data.isUnique);
                            })
                            .
                            error(function (data, status, headers, config) {
                                c.$setValidity('unique', false);
                            });

                });
            }
        };
    });

    //@ sourceURL=pen.js
</script>